<template>
  <div class="wrap">
    <div class="videocontainer">
      <video
        class="fullscreenvideo"
        id="bgvid"
        playsinline=""
        autoplay
        muted=""
        loop
      >
        <source src="./../assets/bg.mp4" type="video/mp4" />
      </video>
    </div>
    <el-container>
      <el-main>
        <el-row
          type="flex"
          justify="center"
          align="middle"
          :style="{ height: windowHeight }"
        >
          <el-col class="login-box" :span="8">
            <h1 class="title-center">互联网医院</h1>
            <el-form
              ref="form"
              :model="formData"
              :rules="rules"
              label-width="55px"
            >
              <el-form-item label="账号:" prop="name">
                <el-input
                  v-model="formData.name"
                  placeholder="请输入账号"
                ></el-input>
              </el-form-item>
              <el-form-item label="密码:" prop="password">
                <el-input
                  v-model="formData.password"
                  type="password"
                  placeholder="请输入密码"
                  show-password
                ></el-input>
              </el-form-item>
              <el-form-item>
                <!--  @click="submit('form') ，传入的应该是ref绑定的DOM节点名； -->
                <el-button class="mybtn-width" type="info" @click="_login"
                  >登录</el-button
                >
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: "",
        password: "",
      },
      //验证规则的设置
      rules: {
        name: [
          { required: true, message: "输入手机号码", trigger: "blur" },
          {
            min: 11,
            max: 11,
            message: "账号为11位的手机号码",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "必须输入密码", trigger: "blur" },
          {
            min: 6,
            max: 6,
            message: "密码的长度是 6 位字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    _login() {
      console.log("this.name", this.formData.name);
      console.log("this.password", this.formData.password);
      this.axios({
        method: "get",
        url: `/Admin/loginAdmin?phone=${this.formData.name}&password=${this.formData.password}`,
      })
        .then((res) => {
          if (res.data.code == 0) {
            this.$message({
              message: "登录成功",
              type: "success",
            });
            let that = this;
            setTimeout(function () {
              // console.log(that)
              that.$router.push("/manage");
            }, 1000);
          } else {
            this.$message({
              type: "warning",
              duration: 3000,
              message: "登录失败",
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  created() {
    this.windowHeight = window.innerHeight - 60 + "px";
    let that = this;
    window.onresize = function () {
      that.windowHeight = window.innerHeight - 60 + "px";
    };
  },
};
</script>

<style lang="less" scoped>
.login-box {
  //   border: 1px solid #909399;
  border-radius: 5px;
  padding: 40px;
  min-width: 500px;
  background-color: rgba(135, 137, 140, 0.2);
}
.title-center {
  text-align: center;
  color: #909399;
}
.mybtn-width {
  width: 100%;
}
.wrap {
  width: 100%;
  height: 100%;
}
.fullscreenvideo {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  -webkit-transition: 1s opacity;
  transition: 1s opacity;
}
.videocontainer {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -100;
}
// .videocontainer:before {
//   content: "";
//   position: absolute;
//   width: 100%;
//   height: 100%;
//   display: block;
//   z-index: -1;
//   top: 0;
//   left: 0;
//   background: rgba(25, 29, 34, 0.65);
// }
</style>